<template>
  <s-layout title="任务企业列表" tabbar="/pages/other/qylist">
    <view class="container">
      <!-- 添加搜索框 -->
      <view class="search-box">
        <fui-icon name="search" :size="28" color="#999"></fui-icon>
        <input
          v-model="searchText"
          placeholder="搜索企业名称"
          class="search-input"
          @input="handleSearch"
        />
      </view>

      <view class="enterprise-list">
        <view
          v-for="enterprise in filteredEnterprises"
          :key="enterprise.id"
          class="enterprise-item"
          @click="navigateToEnterpriseDetail(enterprise)"
        >
          <image
            class="enterprise-logo"
            :src="enterprise.avatar"
            mode="aspectFill"
          />
          <view class="enterprise-info">
            <text class="enterprise-name">{{ enterprise.name }}</text>
            <view class="info-item">
              <fui-icon name="location" :size="28" color="#666"></fui-icon>
              <text class="enterprise-address">{{ enterprise.address }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import sheep from "@/sheep";
// #ifdef H5
sheep.$store("user").isLogin = true;
sheep.$store("user").userInfo = {
  company_id: "1",
  createtime: "2025-04-11 11:00:15",
  del_type: "0",
  people_id: "1",
  tpu_email: "2955@163.com",
  tpu_id: "1",
  tpu_job: "经理",
  tpu_name: "李佳min",
  tpu_phone: "13754687293",
  tpu_role: "1",
  tpu_status: "0",
  updatetime: "2025-04-12 22:41:56",
  user_id: "2",
  wx_avatarUrl: "https://assess.yuejin-tech.com/upload/avatarUrl/22.jpg",
  wx_id: "5",
  wx_openId: "",
  wx_pawd: "$2y$10$puiYf7fZjCg90rz/ZKNHuOoHXQsjgY5190blCqc/zNaFdrC3wnrCi",
  wx_type: "3",
  wx_user: "dsf",
};
sheep.$store("app").template.basic.tabbar.list =
  sheep.$store("app").template.basic.tabbar.otherlist;
// #endif

// 更新企业数据
const enterprises = ref([]);

const searchText = ref("");
// 新增响应式变量存储t_id
const t_id = ref("");

onLoad((options) => {
  t_id.value = options.t_id; // 存储到响应式变量

  const params = {
    third_company_id: sheep.$store("user").userInfo.company_id,
  };

  uni.showLoading({ title: "加载中..." });

  // 发起API请求
  sheep.$api.other
    .getcompanyList(params)
    .then((res) => {
      if (res.code == 200) {
        enterprises.value = res.data.map((item) => ({
          id: item.c_id,
          name: item.c_name,
          address:  item.c_address,
          avatar: item.c_image,
        }));
      }
    })
    
    .finally(() => {
      uni.hideLoading();
    });
});
// 添加搜索功能
const filteredEnterprises = computed(() => {
  return enterprises.value.filter((enterprise) =>
    enterprise.name.toLowerCase().includes(searchText.value.toLowerCase())
  );
});

const navigateToEnterpriseDetail = (enterprise) => {
  console.log("enterprise", enterprise);
  uni.navigateTo({
    url: `/pages/other/qydetails/qytail?company_id=${enterprise.id}`,
  });
};

const handleSearch = () => {
  // 搜索逻辑已通过计算属性实现
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f9f9f9; // 更柔和的背景色
  border-radius: 10rpx; // 圆角
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  padding: 10rpx 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); // 添加阴影
}

.search-input {
  flex: 1;
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
  border: none; // 去掉默认边框
  outline: none; // 去掉聚焦时的边框
}

.enterprise-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx; // 增加间距
}

.enterprise-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s; // 添加过渡效果
}

.enterprise-item:hover {
  transform: scale(1.02); // 悬停时放大效果
}

.enterprise-logo {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.enterprise-info {
  flex: 1;
}

.enterprise-name {
  font-family: "Roboto", sans-serif; // 使用引入的字体
  font-size: 36rpx; // 增加字体大小
  font-weight: bold; // 加粗
  color: #2b85e4; // 使用更醒目的颜色
  margin-bottom: 10rpx; // 增加下边距
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); // 添加阴影效果
  padding: 5rpx; // 添加内边距
  border-radius: 5rpx; // 圆角
  background-color: rgba(255, 255, 255, 0.8); // 背景色
}

.enterprise-address {
  font-size: 28rpx;
  color: #666;
}
</style>
